<template>
  <view class="gg-form-group">
    <view class="gg-form-group-title" v-if="label">
      <view class="gg-form-group-title-item" :style="getStyle"><text>{{label}}</text></view>
    </view>
    <slot />
  </view>
</template>
<script>

export default {
  name: "GgFormGroup",
  props: {
    label: {
      type: String,
      default: ''
    },
    labelAlign: {
      type: String,
      default: 'left'
    },
    layout: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: [String, Number],
      default: ''
    }
  },
  provide() {
    return {
      ggFormGroup: this
    };
  },
  data() {
    return {
    };
  },
  created: function () {
  },
  computed: {
    getStyle() {
      let style = {};
      // 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
      style.textAlign = this.labelAlign
      return style;
    },

  },
};
</script>
    
<style>
.gg-form-group {
  margin-bottom: 10px;
  background-color: #ffffff;
}
.gg-form-group-title {
  background-color: #ffffff;
  padding: 0 15px;
  font-size: 14px;
  font-weight: bold;
  line-height: 45px;
  border-bottom: 1px solid #dedede;
}
.gg-form-group-title-item {
  text-align: left;
  background: white;
  position: relative;
}

.gg-form-group-title-item::before {
  width: 4px;
  height: 22px;
  top: 12px;
  left: -10px;
  position: absolute;
  content: " ";
  background: #22cec0;
}
</style>
